<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>积分配置</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
    <style>
        .mark {
            display: inline-block;
            width: 7px;
            height: 16px;
            border-radius: 3px;
            background-color: #0064FF;
            margin-right: 10px;
        }

        .flex {
            display: flex;
        }

        input::placeholder {
            color: #000;
        }

        .align-center {
            align-items: center;
        }

        .el-input.is-disabled .el-input__inner {
            background-color: #F5F7FA;
            border-color: #E4E7ED;
            color: #606266;
            cursor: not-allowed;
        }

        .el-descriptions-item__label {
            width: 300px;
        }

        .el-input-number .el-input__inner {
            text-align: left;
        }

        .el-input-number__increase,.el-input-number__decrease {
            display: none;
        }

        .el-input-group__append{
            padding: 0 5px;
        }
        input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak class="minWidth">
        <el-form :model="form" :rules="rules" ref="contract" inline-message="true" style="width: 100%">
            <div class="table_titel">
                <div class="titel">积分配置</div>
                <div class="operation">
                    <!-- <el-button type="text" size="small" @click="dialogVisible = true">修改记录</el-button> -->
                </div>
            </div>
            <el-collapse style="margin-bottom: 10px;" v-model="activeNames">
                <el-collapse-item name="1">
                    <template slot="title">
                        <div class="flex align-center">
                            <i class="mark"></i>
                            <span style="font-size: 14px; font-weight: 600;">基础配置</span>
                        </div>
                    </template>
                    <el-descriptions :column="1" border size="small" style="margin-bottom: 20px;">
                        <el-descriptions-item label="积分">
                            <el-form-item prop="Row_Status">
                                <el-radio-group style="margin-left: 15px;" v-model="form.Row_Status">
                                    <el-radio label="0">开启</el-radio>
                                    <el-radio label="1">关闭</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-descriptions-item>
                        <!-- <el-descriptions-item label="下单后每1分赠送多少积分给客户">
                            <el-form-item prop="Gift_Points">
                                <span style="display: flex;">
                                    <el-input-number v-model="form.Gift_Points" controls-position="right" :min="0"></el-input-number>分
                                </span>
                            </el-form-item>
                        </el-descriptions-item> -->
                        <!-- <el-descriptions-item label="满足多少分可以抵扣积分">
                            <el-form-item prop="Points_Deduction">
                                <el-input-number style="width: 100%;" v-model="form.Points_Deduction"
                                    controls-position="right" :min="1"></el-input-number>
                            </el-form-item>
                        </el-descriptions-item> -->
                        <el-descriptions-item label="积分抵扣金额比例">
                            <el-form-item prop="Deduction_Ratio">
                                <span style="display: flex;">
                                    <el-input-number v-model="form.Deduction_Ratio" controls-position="right" :min="0"></el-input-number>分
                                </span>
                                <span style="font-size: 12px; margin-left: 15px; color: #b8c8d4;">1积分可抵扣多少分</span>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-button type="primary" :loading="loading" @click="submitForm('contract')">保存</el-button>
                </el-collapse-item>
                <el-collapse-item name="2">
                    <template slot="title">
                        <div class="flex align-center">
                            <i class="mark"></i>
                            <span style="font-size: 14px; font-weight: 600;">供应商品配置</span>
                        </div>
                    </template>
                    <el-table :data="tableData" stripe border style="width: 100%" max-height="600px">
                        <el-table-column align="center" type="index" label="序号" min-width="50"></el-table-column>
                        <el-table-column prop="Supplier_Article_SerialNumber" min-width="140" show-overflow-tooltip label="供应商品流水号"></el-table-column>
                        <el-table-column prop="Supplier_Name" label="供应商" min-width="140" show-overflow-tooltip >
                            <template slot="header" slot-scope="scope">
                                <el-select @change="onSerach" v-model.trim="page.Supplier_SerialNumber" clearable placeholder="供应商">
                                    <el-option v-for="item in supplier" :key="item.Supplier_SerialNumber"
                                        :label="item.Supplier_Name" :value="item.Supplier_SerialNumber"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Brand_Name" label="品牌" min-width="140" show-overflow-tooltip >
                            <template slot="header" slot-scope="scope">
                                <el-select @change="onSerach" v-model.trim="page.Brand_SerialNumber" clearable placeholder="品牌">
                                    <el-option v-for="item in brand" :key="item.Brand_SerialNumber"
                                        :label="item.Brand_Name" :value="item.Brand_SerialNumber"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Article_Name" min-width="140" show-overflow-tooltip >
                            <template slot="header" slot-scope="scope">
                                <el-input @change="onSerach" v-model="page.Article_Name" clearable placeholder="商品名称"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Specifications_Name" min-width="140" show-overflow-tooltip  label="规格名称"></el-table-column>
                        <el-table-column prop="Picture_URL" min-width="140" align="center" label="规格封面">
                            <template v-slot="{row}">
                                <el-image fit="contain" :src="BASE_IMG + row.Picture_URL" style="width:115px;height: 115px;"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column label="该商品可适用的积分类型" min-width="220">
                            <template v-slot="{row}">
                                <el-checkbox-group v-model="row.Pionts">
                                    <el-checkbox label="Cash">现金积分</el-checkbox>
                                    <!-- <el-checkbox label="Activit">活动积分</el-checkbox>
                                    <el-checkbox label="Gift">赠送积分</el-checkbox>
                                    <el-checkbox label="Sales">消费积分</el-checkbox> -->
                                </el-checkbox-group>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Sales_Datetime" min-width="150" label="抵扣类型">
                            <template v-slot="{row}">
                                <el-radio-group v-model="row.Deduction_Type">
                                    <el-radio label="0">固定抵扣上限</el-radio>
                                    <el-radio label="1">订单消费百分比</el-radio>
                                </el-radio-group>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Sales_Datetime"  min-width="150" label="每笔订单最多抵扣多少积分">
                            <template v-slot="{row}">
                                <el-input type="number" style="width: 100%;" v-model="row.Deduction_Limit">
                                    <template v-if="row.Deduction_Type=='1'" slot="append">%</template>
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Sales_Datetime"  min-width="150" label="是否允许积分组合适用">
                            <template v-slot="{row}">
                                <el-radio-group v-model="row.Combination">
                                    <el-radio label="0">是</el-radio>
                                    <el-radio label="1">否</el-radio>
                                </el-radio-group>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="操作" width="100" fixed="right">
                            <template slot="header" slot-scope="scope">
                                <el-button :loading="loading" type="text" size="small" @click="wholeSave">全部保存</el-button>
                            </template>
                            <template v-slot="{row}">
                                <el-button :loading="row.loading" type="primary" size="small" @click="Save(row)">保存</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination style="margin-top: 5px;" background @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" :current-page="page.page" :page-sizes="[10, 20, 30, 50]"
                        :page-size="page.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </el-collapse-item>
            </el-collapse>
        </el-form>
        <config-log :visible.sync="dialogVisible" :refresh.sync="Refresh"></config-log>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../component/component.js"></script>
    <script type="text/javascript" src="../../../config/config.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

</html>